<template>
	<div class="day-box">
		<div class="container">
			<div class="div-img">
				<div class="week">{{ this.$store.state.dayList.weekday }}</div>
				<div class="nongli">{{ this.$store.state.dayList.lunar }}</div>
				<div class="year-month">{{ this.$store.state.dayList.date }}</div>
			</div>
			<div class="day-detail">
				<span class="span1">当前年月</span>
				<span class="span2">2021年1月</span>
			</div>
			<div class="day-detail">
				<span class="span1">今年属相</span>
				<span class="span2">{{ this.$store.state.dayList.animalsYear }}</span>
			</div>
			<div class="day-detail">
				<span class="span1">农历年份</span>
				<span class="span2">{{ this.$store.state.dayList.lunar }}</span>
			</div>
			<div class="day-detail">
				<span class="span1">适宜事件</span>
				<span class="span2">{{ this.$store.state.dayList.suit }}</span>
			</div>
			<div class="day-detail">
				<span class="span1">避免事件</span>
				<span class="span2">{{ this.$store.state.dayList.avoid }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { getData } from '../libs/requestwannian.js'
	export default{
		name: 'Day',
		mounted() {
			getData('day','2021-1-6')
		}
	}
</script>

<style lang="less" scoped="scoped">
	.div-img{
		width: 94%;
		height: 2.1rem;
		margin: .1rem 3%;
		box-shadow: 2px 2px 5px 2px #ccc;
		border-radius: 10px;
		background-image: url(../assets/imger/02.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.week{
			width: 100%;
			height: .3rem;
			font-size: .3rem;
			padding: 0 .7rem;
			color: #786C67;
		}
		.nongli{
			width: 100%;
			height: 1.1rem;
			font-size: .6rem;
			text-align: center;
			line-height: 1.1rem;
			color: #DB6E44;
		}
		.year-month{
			width: 100%;
			height: .7rem;
			font-size: .3rem;
			text-align: center;
			color: #8A7F82;
		}
	}
	.day-detail{
		width: 94%;
		height: .44rem;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-top: .18rem;
		margin-left: 3%;
		line-height: .4rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		.span1{
			font-size: .2rem;
			color: #ed4040;
			margin-left: .2rem;
		}
		.span2{
			margin-left: .4rem;
			
		}
	}
	
</style>
